<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		li{list-style:none;}
		ul{
			width:600px;
			border:1px solid #e3e3e3;
			margin:100px auto;
			display: flex;
			font-size: 14px;
		}
		a{color:#999;text-decoration:none;}
		li{
			line-height:42px;
			color:#999;
			border-right:1px dashed #e3e3e3;
			width:20%;
			text-align: center;
		}
		.icon{
			width: 16px;
			height: 15px;
			display:inline-block;
			background-image: url(icon-sprite.png);
			transform: translate(0,2px);
			background-position:0 0;
			transition:all .5s;
		}
		li:hover .icon{
			background-position:-16px -25px;
		}
	</style>
</head>
<body>
	<ul>
		<li>
			<span class="icon"></span>
			<a href="#">我的主页</a>
		</li>
		<li>
			<span class="icon"></span>
			<a href="#">新闻头条</a>
		</li>
		<li>
			<span class="icon"></span>
			<a href="#">电视剧</a>
		</li>
		<li>
			<span class="icon"></span>
			<a href="#">最新电影</a>
		</li>
		<li>
			<span class="icon"></span>
			<a href="#">小说大全</a>
		</li>
	</ul>
</body>
</html>